<template>
  <div style="margin: 20px">
    <el-form :inline="true" class="form-inline" :model="formValue">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="审核结果:" style="flex: 1; margin-right: 20px;">
            <el-radio-group v-model="formValue.dealResult" @change="dealResultChange">
              <el-radio :value="200">通过</el-radio>
              <el-radio :value="100">拒绝</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="拒绝原因:" style="flex: 1; margin-right: 20px;">
            <el-input :disabled="rejectReasonDisable" type="textarea" :rows="2" placeholder="拒绝原因" v-model="formValue.rejectReason" style="width: 500px" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item style="flex: 1; margin-right: 20px;">
            <el-button type="primary" class="fixed-button" @click="goBack">返回</el-button>
            <el-button type="danger" class="fixed-button" @click="onSubmit">确认</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup>
import {useRouter} from "vue-router";
import {ref} from "vue";

const router = useRouter()

const props = defineProps({
  formValue: {
    type: Object,
    required: true
  },
  onSubmit: {
    type: Function,
    required: true
  },
});

const rejectReasonDisable = ref(true)

const dealResultChange = () => {
  if (props.formValue.dealResult === 200) {
    rejectReasonDisable.value = true
  } else {
    rejectReasonDisable.value = false
  }
}

const goBack = () => {
  router.back()
}
</script>

<style scoped>

</style>